<template>
  <div class="app-container">
    <el-form ref="filterForm" :inline="true" class="filter-container">
      <el-form-item>
        <el-button
          size="small"
          icon="el-icon-download"
          :loading="exportListLoading"
          :disabled="exportListLoading"
          @click="exportList"
        >导出名单</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="用户">
        <template slot-scope="scope">
          <router-link :to="`/users/list/${scope.row.userid}`">{{ scope.row.name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.tel }}
        </template>
      </el-table-column>
      <el-table-column label="医院">
        <template slot-scope="scope">
          {{ scope.row.hospitalName }}
        </template>
      </el-table-column>
      <el-table-column label="科室" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column label="微信账号">
        <template slot-scope="scope">
          {{ scope.row.nickName }}
        </template>
      </el-table-column>
      <el-table-column label="签到来源" width="120" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.signInSource === 1"
            effect="plain"
            type="success"
            size="mini"
          >受邀签到</el-tag>
          <el-tag
            v-else-if="scope.row.signInSource === 2"
            effect="plain"
            type="success"
            size="mini"
          >人工核实签到</el-tag>
          <el-tag
            v-else-if="scope.row.signInSource === 3"
            effect="plain"
            type="success"
            size="mini"
          >线上签到</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="签到类型" width="120" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.type === 1"
            effect="plain"
            size="mini"
          >会议签到</el-tag>
          <el-tag
            v-else-if="scope.row.type === 2"
            effect="plain"
            size="mini"
          >签到礼签到</el-tag>
          <el-tag
            v-else-if="scope.row.type === 3"
            effect="plain"
            size="mini"
          >现场签到</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="签到时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.createtime | moment('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :auto-scroll="false" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="fetchData" />
  </div>
</template>

<script>
import {
  getMeetingSignin
} from '@/api/meetings'
import {
  exportMeetingSign
} from '@/api/statements'
import Pagination from '@/components/Pagination'
import { blobExport } from '@/utils'

export default {
  name: 'MeetingCheckinList',
  components: {
    Pagination
  },
  props: {
    meetingId: {
      type: String,
      default: ''
    },
    meetingName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        meetingId: this.meetingId,
        page: 1,
        size: 20
      },
      exportListLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getMeetingSignin(this.listQuery).then(response => {
        // console.log(response)
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.list = []
      this.fetchData()
    },
    resetFilter() {
      this.$refs.filterForm.resetFields()
      this.handleFilter()
    },
    exportList() {
      this.exportListLoading = true
      exportMeetingSign({
        id: this.meetingId
      }).then(response => {
        // console.log(response)
        blobExport(response, `${this.meetingName} - 会议签到名单.xlsx`)

        this.$message({
          type: 'success',
          message: '导出成功！',
          duration: 5000
        })
        this.exportListLoading = false
      }).catch(err => {
        console.log(err)
        this.exportListLoading = false
      })
    }
  }
}
</script>
